<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      // promise.all promise 自带的一个函数

      // 传入一个数组，数组里面每一项的都是 promise

      // Promise.all([promise1, promise2, promise3, ...]).then(([res1, res2, res3, ...])=>{/*...*/})

      // Promise all 中，所有 promise 都返回（resolve）的时候，返回全部结果到 .then 参数

      // 返回等待 n 毫秒的 promise
      function wait(n) {
        return new Promise((res) => {
          setTimeout(() => {
            console.log(1);
            res(`等待了${n}毫秒`);
            console.log(2);
          }, n);
        });
      }

      wait(1000).then((res) => {
        console.log(3);
        console.log(res);
      });

      // 宏 batch 批处理 它干了很多事
      // 微 micro 只干一件事   一段时间以后，干一件事，再过一段时间以后...
      // 微前端，微服务，微内核 —— “微”：只干一件事
      // 一个宏任务，可以发起，很多个微任务（微任务列表）

      // Promise: pending / fulfilled / rejected 同一时间，只能有三种状态中的一个

      // pending -> fulfilled / pending -> rejected

      // Promise（.then） 只干一件事 - “微”任务

      // 老办法：错了也有结果
      // const result = [];
      // wait(1000).then((res) => {
      //   console.log(res);
      //   result[0] = res;
      // });
      // wait(2000).then((res) => {
      //   console.log(res);
      //   result[1] = res;
      // });
      // wait(3000).then((res) => {
      //   console.log(res);
      //   result[2] = res;
      //   // 在最后一个返回时，打印全部
      //   console.log(result);
      // });

      // 最后一个返回时，返回一连串 promise 的 resolve
      // 一个错了都错了
      // Promise.all([wait(1000), wait(2000), wait(3000)]).then((res) => {
      //   console.log("Promise.all", res);
      // });

      // Promise.race
      // 传入一个 promise 的数组 和 all 参数一样
      // 哪个 promise 先返回，就返回哪个的 resolve
      // 做男人一定要快！
      // 不管有没有报错，都拿第一返回(resolve)的
      // Promise.race([wait(1000), wait(500), wait(3000)]).then((res) => {
      //   console.log("Promise.race", res);
      // });

      // // Promise.resolve
      // // 声明一个 Promise，直接 resolve，等待当前线程（宏任务）跑完，接到跑
      // function resolve(data) {
      //   return new Promise((res) => {
      //     res(data);
      //   });
      // }

      // resolve("直接注册微任务1").then(console.log);
      // Promise.resolve("直接注册微任务2").then(console.log);
      // setTimeout(() => {
      //   console.log("宏任务来了");
      //   Promise.resolve("直接注册微任务3").then(console.log);
      //   resolve("直接注册微任务4").then(console.log);
      //   console.log("这个宏任务又结束了");
      // }, 0);
      // console.log("当前宏任务执行完成");

      // 宏任务 -> 微任务列表 -> 下一个宏任务 -> 下一个微任务列表

      //  async await 语法糖
      // 1 秒，再等 2 秒，再等 3 秒
      // function waitFunc() {
      //   return wait(1000)
      //     .then((res) => {
      //       console.log("-", res);
      //       return wait(2000);
      //     })
      //     .then((res) => {
      //       console.log("-", res);
      //       return wait(3000);
      //     })
      //     .then((res) => {
      //       console.log("-", res);
      //     });
      // }
      // waitFunc();

      // 语法糖 不改变功能
      // 新 api ×，语法糖
      // 因为要求，async await 可以嵌套使用，async 函数可以被 await
      // 所以 async 函数必然返回一个 promise

      // async function waitFuncAsync() {
      //   const res1 = await wait(1000);
      //   // 微任务
      //   console.log("=", res1);
      //   const res2 = await wait(2000);
      //   console.log("=", res2);
      //   const res3 = await wait(3000);
      //   console.log("=", res3);
      // }
      // waitFuncAsync();

      // async 函数都会返回 promise
      // async function async1() {
      //   console.log("async1 start"); // await 会阻塞后面的代码执行，执行完async2()后，跳出async1()，执行同步代码
      //   await async2();
      //   console.log("async1 end");
      // }
      // async function async2() {
      //   console.log("async2");
      // }
      // function async1() {
      //   console.log("async1 start");
      //   return async2().then(() => {
      //     console.log("async1 end");
      //   });
      // }
      // function async2() {
      //   console.log("async2");
      //   return Promise.resolve();
      // }
      // console.log("script start");
      // setTimeout(function () {
      //   console.log("setTimeout");
      // }, 0);
      // async1();
      // new Promise(function (resolve) {
      //   console.log("promise1");
      //   resolve();
      // }).then(function () {
      //   console.log("promise2");
      // });
      // console.log("script end");

      // function async1() {
      //   console.log("async1 start");
      //   async2().then(() => {
      //     console.log("async1 end");
      //   });
      // }
      // function async2() {
      //   console.log("async2");
      //   return Promise.resolve();
      // }
      // console.log("script start");
      // setTimeout(function () {
      //   console.log("setTimeout");
      // }, 0);
      // async1();
      // new Promise(function (resolve) {
      //   console.log("promise1");
      //   resolve();
      // }).then(function () {
      //   console.log("promise2");
      // });
      // console.log("script end");
    </script>
  </body>
</html>
